<template>
  <div class="tree-wrapper">
    <div class="border-wrapper">
      <div class="industry-list">
        <div class="industry-filter">
          <el-input size="mini" v-model="industryFilter" clearable placeholder="输入关键字搜索"/>
        </div>
        <div class="list-wrapper">
          <div class="list-item"
               v-for="(item, index) in industrys"
               :key="index + 'list-item'"
               :class="activeIndustry.industry === item.industry && 'active'"
               @click="changeIndustry(item)"
          >
            <p>{{ item.industry }}</p>
            <p>{{ $dayjs(item.updateDate).format('YY-MM-DD') }} 更新</p>
          </div>
          <div class="empty" v-if="!industrys.length">暂无数据</div>
        </div>
      </div>
      <div class="industry-detail">
        <div class="tool-bar">
          <div>
            <el-popover placement="right" trigger="hover">
              <div class="tip-content">
                <h1>指标说明</h1>
                <p>产业链图谱包含6条重点产业链，及其产业链上下游一级二级三级细分产业。产业景气度是在历史景气度的基础上，参考PMI
                  指数的思路编制分析师景气度指数，来识别行业短期发展趋势
                  ，计算方式是基于历史财务数据构建历史景气度指标：选取增长能力、盈利能力、周转效率、负债水平、现金流能力 5
                  个景气维度，分别以上市公司营收增长率、净利润增长率等 7
                  个指标作为各维度的测量变量，并赋予不同的权重，构建景气度指数。</p>
              </div>
              <template slot="reference">
                <i class="el-icon-question"/>
              </template>
            </el-popover>

            <el-select v-model="detailType" size="mini" @change="detailTypeChange">
              <el-option v-for="item in DETAIL_TYPES" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
            <template v-if="!detailType">
              <el-checkbox v-model="showTertiaryIndustry" @change="changeShowAll">显示三级产业</el-checkbox>
              <el-checkbox v-model="showClimateIndex">显示景气指数</el-checkbox>
            </template>
            <template v-else>
              <el-radio-group v-model="industryLevel" @change="changeDetailLevel">
                <el-radio :label="2">一级产业</el-radio>
                <el-radio :label="3">二级产业</el-radio>
                <el-radio :label="4">三级产业</el-radio>
              </el-radio-group>
            </template>
          </div>
          <template v-if="!detailType">
            <!--<div class="climate-example" v-if="showClimateIndex">-->
            <!--  <div class="color-example">-->
            <!--    <div class="example-item" v-for="(item, index) in climateColors" :key="index">-->
            <!--      <span :class="item.class"/>-->
            <!--      {{ item.label }}-->
            <!--    </div>-->
            <!--  </div>-->
            <!--  <div class="up-down">-->
            <!--    <div class="example-arrow">-->
            <!--      <em class="el-icon-caret-top"/>-->
            <!--      同比下降-->
            <!--    </div>-->
            <!--    <div class="example-arrow">-->
            <!--      <em class="el-icon-caret-bottom"/>-->
            <!--      同比上升-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
          </template>
        </div>
        <div class="chart-content" v-loading="loading">
          <!--tool-bar-->
          <ZmTreeOrg
              ref="tree"
              :data="treeData"
              :horizontal="false"
              :disabled="true"
              :clone-node-drag="false"
              :node-draggable="false"
              :collapsable="true"
              :default-expand-level="3"
              :tool-bar="false"
              @on-expand="onExpandChild"
              @on-drag="ondrag"
          >
            <template v-slot="{node}">
              <!--产业链名称-->
              <div v-if="node.level === 1" class="circle-item">
                <div class="current-industry" :class="(showClimateIndex && 'climate-mode')  + ' ' + getNodeLevelClass(node)">
                  <!--普通模式-->
                  <img src="@/assets/node.png" v-if="!showClimateIndex" class="normal-bg" alt="">
                  <!-- 显示景气度模式 -->
                  <p class="climate-info" v-else>
                    {{ node.num }}
                    <br>
                    <em :class="node.status ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/>
                  </p>
                  {{ node.label }}
                </div>
                <!--<div class="anchor-bottom"/>-->
              </div>
              <!--产业链-->
              <div v-else-if="node.level === 2" class="circle-item" :class="node.class">
                <div class="chain-item" :class="(showClimateIndex && 'climate-mode')  + ' ' + getNodeLevelClass(node)">
                  <!--普通模式-->
                  <img src="@/assets/node.png" v-if="!showClimateIndex" class="normal-bg" alt="">
                  <!-- 显示景气度模式 -->
                  <p class="climate-info" v-else>
                    {{ node.num }}
                    <br>
                    <em :class="node.status ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/>
                  </p>
                  {{ node.label }}
                </div>
                <!--<div class="anchor-top"/>-->
                <!--<div class="anchor-bottom" v-if="node.children.length"/>-->
              </div>
              <!-- 一级产业 -->
              <div
                  v-else-if="node.level === 3"
                  class="group-item"
                  :class="node.class + ' ' + getNodeLevelClass(node) + ' ' + (detailType ? 'detail-mode' : '')"
              >
                <el-popover placement="right" trigger="click" :key="node.id" :disabled="!!detailType">
                  <div class="tip-content">
                    <h1>标杆企业清单：【{{ node.label }}】</h1>
                    <div class="company-list">
                      <span
                          v-for="item in getCompanysForIndustry({ data: node, companys: [] })"
                          :key="item.id"
                          @click="checkCompanyDetail(node)"
                      >
                        {{ item.name }}
                      </span>
                    </div>
                  </div>
                  <template slot="reference">
                    <div class="item-content" :class="getNodeLevelClass(node)">
                      <div class="item-content-box">
                        <p class="climate-info" v-if="showClimateIndex">
                          {{ node.num }}
                          <em :class="node.status ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/>
                        </p>
                        {{ node.label }}
                      </div>
                      <!--细分领域-->
                      <div class="sub-companys" v-if="(!node.expand || !node.children.length) && detailType">
                        <div
                            class="company-item"
                            v-for="item in getCompanysForIndustry({ data: node, companys: [] })"
                            :key="item.id"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </template>
                </el-popover>
                <!--<div class="anchor-top"/>-->
                <!--<div class="anchor-bottom" v-if="node.children && node.children.length"/>-->
              </div>
              <!--二、三级产业-->
              <div
                  v-else
                  class="vertical-item"
                  :class="node.class + ' ' + (detailType ? 'detail-mode' : '') + ' ' + (node.level === 4 ? 'second-in-item' : 'three-in-item')"
              >
                <el-popover placement="right" trigger="click" :key="node.id" :disabled="!!detailType">
                  <div class="tip-content">
                    <h1>标杆企业清单：【{{ node.label }}】</h1>
                    <div class="company-list">
                      <span
                          v-for="item in getCompanysForIndustry({ data: node, companys: [] })"
                          :key="item.id"
                          @click="checkCompanyDetail(node)"
                      >
                        {{ item.name }}
                      </span>
                    </div>
                  </div>
                  <template slot="reference">
                    <div class="item-content" :class="getNodeLevelClass(node)">
                      <div class="item-content-box">
                        <!--景气指数-->
                        <p class="climate-info" v-if="showClimateIndex">
                          {{ node.num }}
                          <em :class="node.status ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/>
                        </p>
                        <!-- 细分产业链图谱 二级产业 -->
                        <div
                          class="tag-box"
                          :class="node.tag.class"
                          v-if="!showClimateIndex && !detailType && node.level === 4"
                          @click="openTag(node)"
                        >
                          {{ node.tag.label }}
                        </div>
                        {{ node.label }}
                      </div>
                      <!--细分领域-->
                      <div class="sub-companys" v-if="(!node.expand || !node.children.length) && detailType">
                        <div
                            class="company-item"
                            v-for="item in getCompanysForIndustry({ data: node, companys: [] })"
                            :key="item.id"
                        >
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                  </template>
                </el-popover>
                <!--<div class="anchor-top"/>-->
                <!--<div class="anchor-bottom" v-if="node.children && node.children.length"/>-->
              </div>
            </template>
            <template v-slot:expand="{ node }">
              <div :class="isShowExpandBtn(node)">
                <em class="el-icon-circle-plus" v-if="!node.expand"/>
                <em class="el-icon-remove" v-else/>
              </div>
            </template>
          </ZmTreeOrg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { INDUSTRY_CHAINS, INDUSTRY_DATA, DETAIL_TYPES } from './enmu'
import { cloneDeep } from 'lodash'
import { nanoid } from 'nanoid'
import Mock from 'mockjs'
import PRIMARYBG from '@/assets/primary.png'
import SECONDBG from '@/assets/second.png'

export default {
  name: 'AnalysisOfIndustryChain',
  data() {
    return {
      INDUSTRY_CHAINS,
      INDUSTRY_DATA,
      DETAIL_TYPES,
      loading: true,
      industryFilter: '',
      activeIndustry: {},
      chains: [],
      detailType: 0,
      industryLevel: 1,
      showTertiaryIndustry: false,
      showClimateIndex: false,
      firstHorizontalLineInfo: {
        width: 0,
        marginLeft: 0
      },
      secondHorizontalLine: 0,
      alreadyInitialized: false,
      expandAll: false,
      treeData: {},
      climateColors: [
        {
          label: '高',
          class: 'high',
          min: 80,
          max: 100
        },
        {
          label: '较高',
          class: 'higher',
          min: 60,
          max: 80
        },
        {
          label: '中等',
          class: 'medium',
          min: 40,
          max: 60
        },
        {
          label: '较低',
          class: 'lower',
          min: 20,
          max: 40
        },
        {
          label: '低',
          class: 'low',
          min: 0,
          max: 20
        }
      ],
      specialTags: [
        {
          label: '高',
          class: 'tag-high'
        },
        {
          label: '较高',
          class: 'tag-higher'
        },
        {
          label: '高非',
          class: 'tag-gaoFei'
        }
      ]
    }
  },
  computed: {
    industrys() {
      const baseData = cloneDeep(this.INDUSTRY_DATA)
      if ( this.industryFilter ) {
        return baseData.filter(item => item.industry.indexOf(this.industryFilter) >= 0)
      }

      return baseData
    }
  },
  async mounted() {
    await this.initPage()
    //document.getElementsByClassName('zoom-container')[0].getElementsByClassName('zm-draggable')[0].style.transform = 'translate(50%, 0px)'
    setTimeout(() => {
      this.generatorIndustryBackground({ type: '一等级产业', class: 'primary-industry' })
      this.generatorIndustryBackground({ type: '二等级产业', class: 'second-industry' })
      this.loading = false
      //this.detailTypeChange(1)
      //this.detailType = 1
    }, 500)
  },
  updated() {
    this.alreadyInitialized = true
  },
  methods: {
    initPage() {
      return new Promise((resolve) => {
        this.activeIndustry = INDUSTRY_DATA[0]
        this.getChains()
        this.initTreeData()
        resolve()
      })
    },
    changeIndustry(item) {
      this.activeIndustry = cloneDeep(item)
      //this.initTreeData()

    },
    getChains() {
      this.chains = []
      const { activeIndustry } = this
      this.INDUSTRY_CHAINS.forEach(chain => {
        const { industryChain } = activeIndustry
        if ( industryChain.some(item => item.chain === chain.value) ) {
          this.chains.push(cloneDeep(chain))
        }
      })
    },
    initTreeData() {
      const id = nanoid()
      const Random = Mock.Random
      this.treeData = {
        id,
        level: 1,
        status: Random.integer(0, 1),
        num: Random.float(0, 100, 0, 2),
        expand: true,
        label: this.activeIndustry.industry,
        children: this.getChildren({ level: 1, id, arr: this.activeIndustry.industryChain, class: '' })
      }
    },
    /**
     * 生成children
     * @param params
     * @returns {*[]}
     */
    getChildren(params) {
      const Random = Mock.Random
      const { level, id: pid, arr, class: parentClass } = params
      let children = []
      // 层级1 产业链
      if ( level === 1 ) {
        children = arr.map(item => {
          const id = nanoid()
          const chainInfo = this.INDUSTRY_CHAINS.find(chain => chain.value === item.chain)
          return {
            id,
            pid,
            expand: true,
            label: chainInfo.label,
            class: chainInfo.class,
            status: Random.integer(0, 1),
            num: Random.float(0, 100, 0, 2),
            chain: item.chain,
            level: level + 1,
            children: item?.primaryIndustry?.length
                ? this.getChildren({ level: level + 1, id, arr: item.primaryIndustry, class: chainInfo.class })
                : []
          }
        })
      }
      // 一级产业
      if ( level === 2 ) {
        children = arr.map(item => {
          const id = nanoid()
          return {
            id,
            pid,
            expand: true,
            label: item.name,
            class: parentClass,
            companys: item?.companys || [],
            status: Random.integer(0, 1),
            num: Random.float(0, 100, 0, 2),
            level: level + 1,
            children: item?.secondaryIndustry?.length
                ? this.getChildren({ level: level + 1, id, arr: item.secondaryIndustry, class: parentClass })
                : []
          }
        })
      }
      // 二级产业
      if ( level === 3 ) {
        children = arr.map(item => {
          const id = nanoid()
          return {
            id,
            pid,
            class: parentClass,
            expand: false,
            tag: this.specialTags[Random.integer(0, 2)],
            status: Random.integer(0, 1),
            num: Random.float(0, 100, 0, 2),
            companys: item?.companys || [],
            label: item.name,
            level: level + 1,
            children: item?.tertiaryIndustry?.length
                ? this.getChildren({ level: level + 1, id, arr: item.tertiaryIndustry, class: parentClass })
                : []
          }
        })
      }
      // 三级产业
      if ( level === 4 ) {
        children = arr.map(item => {
          const id = nanoid()
          return {
            id,
            pid,
            status: Random.integer(0, 1),
            num: Random.float(0, 100, 0, 2),
            class: parentClass,
            label: item.name,
            companys: item?.companys || [],
            level: level + 1,
            children: []
          }
        })
      }
      return children
    },
    /**
     * 初始化生辰产业背景
     */
    generatorIndustryBackground(params) {
      const targetDom = document.getElementsByClassName('zm-draggable')[0].getElementsByClassName('tree-org')[0]
      const { type, class: nodeClass } = params
      const titleBgMap = {
        "primary-industry": PRIMARYBG,
        "second-industry": SECONDBG,
        "tertiary-industry": SECONDBG,
      }
      // 防止重复添加
      if ( targetDom.getElementsByClassName(nodeClass).length ) return
      // 如果不存在就添加dom
      const firstIndustryWrapper = window.document.createElement("div")
      firstIndustryWrapper.classList.add(nodeClass)
      // 标题
      const firstIndustryTypeDom = window.document.createElement("div")
      firstIndustryTypeDom.classList.add('industry-type')
      firstIndustryTypeDom.innerText = type
      // 标题背景
      const titleBgIMG = window.document.createElement("img")
      titleBgIMG.setAttribute('src', titleBgMap[params.class])
      firstIndustryTypeDom.appendChild(titleBgIMG)
      // 包裹容器
      const firstIndustryBgDom = window.document.createElement("div")
      firstIndustryBgDom.classList.add('primary-industry-list')
      firstIndustryWrapper.appendChild(firstIndustryTypeDom)
      firstIndustryWrapper.appendChild(firstIndustryBgDom)
      targetDom.appendChild(firstIndustryWrapper)

      if ( this.detailType ) {
        this.$nextTick(() => this.adjustElementStyle())
      }
    },
    /**
     * 打开二、三级产业
     */
    onExpandChild(e, data) {
      const treeDom = document.getElementsByClassName('zm-draggable')[0].getElementsByClassName('tree-org')[0]
      if ( data.expand ) {
        if ( data.level === 4 ) {
          if ( !treeDom.getElementsByClassName('tertiary-industry').length ) {
            this.generatorIndustryBackground({ type: '三等级产业', class: 'tertiary-industry' })
          }
        }
        if ( data.level === 3 ) {
          if ( !treeDom.getElementsByClassName('second-industry').length ) {
            this.generatorIndustryBackground({ type: '二等级产业', class: 'second-industry' })
          }
        }
      } else {
        if ( data.level === 4 ) {
          const status = this.checkTargetLevelExpand({ data: this.treeData, level: 4, status: [] })
          if ( status.every(item => !item) && treeDom.getElementsByClassName('tertiary-industry').length ) {
            treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
          }
        }
        if ( data.level === 3 ) {
          const status = this.checkTargetLevelExpand({ data: this.treeData, level: 3, status: [] })
          if ( status.every(item => !item) && treeDom.getElementsByClassName('second-industry').length ) {
            treeDom.removeChild(treeDom.getElementsByClassName('second-industry')[0])
            // 判断是否存在三级节点
            treeDom.getElementsByClassName('tertiary-industry').length
                ? treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
                : ''
          }

          // 检测三级状态
          const stateOfTertiaryIndustry = this.checkTargetLevelExpand({ data: this.treeData, level: 4, status: [] })
          if ( stateOfTertiaryIndustry.every(item => !item) && treeDom.getElementsByClassName('tertiary-industry').length ) {
            treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
          }
        }
      }

      if ( this.detailType ) {
        this.$nextTick(() => this.adjustElementStyle())
      }

      this.$nextTick(() => {
        if (this.$refs.tree.left < 0)
        this.$refs.tree.left = 0
      })
    },
    /**
     * 打开所有三级产业
     */
    changeShowAll(e) {
      this.changeTheStateRecursively({ status: e, data: this.treeData, level: 4 })
      console.log(this.checkDataDeep({ tree: this.treeData, level: 1 }))
      this.$nextTick(() => {
        const treeDom = document.getElementsByClassName('zm-draggable')[0].getElementsByClassName('tree-org')[0]
        e
            ? this.generatorIndustryBackground({ type: '三等级产业', class: 'tertiary-industry' })
            : treeDom.getElementsByClassName('tertiary-industry')[0] && treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
      })
    },
    /**
     * 检测数据深度
     * @param params
     * @returns {*}
     */
    checkDataDeep(params) {
      const { tree, level } = params
      let curLevel = level
      if (params.children?.length) {
        params.children.forEach(item => {
          this.checkDataDeep({ tree: item, level, curLevel })
        })
      }

      if (!params.children?.length) {
        curLevel = tree.level > curLevel ? tree.level : level
      }

      return curLevel
    },
    /**
     * 递归更改对应级别产业
     * @param params
     */
    changeTheStateRecursively(params) {
      const { status, data, level } = params
      if ( data.level === level ) {
        // 没有子节点不需要展开
        data.expand = data.children.length ? status : false
      }
      // 如果当前节点级别大于目标节点
      if ( data.level > level ) {
        data.expand = false
      }
      if ( data.children?.length ) {
        data.children.forEach(item => {
          this.changeTheStateRecursively({ status, data: item, level })
        })
      }
    },
    /**
     * 查找产业公司
     * @param params
     */
    getCompanysForIndustry(params) {
      const { data, companys } = params
      if ( data.companys?.length ) {
        data.companys.forEach(item => companys.push({ name: item.name, id: nanoid() }))
      }
      if ( data.children?.length ) {
        data.children.forEach(item => {
          this.getCompanysForIndustry({ data: item, companys })
        })
      }

      return companys
    },
    /**
     * 检测指定节点状态
     * @param params
     */
    checkTargetLevelExpand(params) {
      const { data, level, status } = params
      if ( data.level === level ) {
        status.push(data.expand)
      }
      if ( data.children?.length ) {
        data.children.forEach(item => {
          this.checkTargetLevelExpand({ data: item, level, status })
        })
      }
      return status
    },
    /**
     * 获取节点样式
     * @param node
     */
    getNodeLevelClass(node) {
      if ( this.showClimateIndex ) {
        const level = this.climateColors.find(item => item.min <= node.num && item.max >= node.num)

        return level.class
      }

      return ''
    },
    /**
     * 改变查看类型
     */
    detailTypeChange(e) {
      const treeDom = document.getElementsByClassName('zm-draggable')[0].getElementsByClassName('tree-org')[0]
      this.showTertiaryIndustry = false
      this.showClimateIndex = false
      this.industryLevel = 2
      // 查看景气度
      if ( !e ) {
        //打开二级
        this.changeTheStateRecursively({ status: true, data: this.treeData, level: 3 })
        //关闭三级
        this.changeTheStateRecursively({ status: false, data: this.treeData, level: 4 })
        // 生成二级产业背景
        this.generatorIndustryBackground({ type: '二等级产业', class: 'second-industry' })
        // 删除2、3级产业背景
        if ( treeDom.getElementsByClassName('tertiary-industry').length ) {
          treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
        }
      } else {
        //查看细分产业图谱
        this.changeDetailLevel(2)
      }
      this.$nextTick(() => this.adjustElementStyle())
    },
    /**
     * 改变细分领域查看等级
     * @param e
     */
    changeDetailLevel(e) {
      const treeDom = document.getElementsByClassName('zm-draggable')[0].getElementsByClassName('tree-org')[0]
      if ( e === 4 ) {
        this.changeTheStateRecursively({ status: true, data: this.treeData, level: 3 })
        this.changeTheStateRecursively({ status: true, data: this.treeData, level: 4 })
        this.generatorIndustryBackground({ type: '二等级产业', class: 'second-industry' })
        this.generatorIndustryBackground({ type: '三等级产业', class: 'tertiary-industry' })
      } else if ( e === 3 ) {
        this.changeTheStateRecursively({ status: true, data: this.treeData, level: e })
        this.generatorIndustryBackground({ type: '二等级产业', class: 'second-industry' })
        // 删除2、3级产业背景
        if ( treeDom.getElementsByClassName('tertiary-industry').length ) {
          treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
        }
      } else if ( e === 2 ) {
        this.changeTheStateRecursively({ status: true, data: this.treeData, level: e })
        // 删除2、3级产业背景
        if ( treeDom.getElementsByClassName('tertiary-industry').length ) {
          treeDom.removeChild(treeDom.getElementsByClassName('tertiary-industry')[0])
        }
        if ( treeDom.getElementsByClassName('second-industry').length ) {
          treeDom.removeChild(treeDom.getElementsByClassName('second-industry')[0])
        }
      }
      this.$nextTick(() => this.adjustElementStyle())
    },
    // 判断是否隐藏展开按钮
    isShowExpandBtn(node) {
      // 细分产业图谱
      if ( !this.detailType ) {
        return node.level > 3 ? '' : 'hide-expand'
      }
      return node.level > 2 ? '' : 'hide-expand'
    },
    // 细分领域展开收起产业调整宽度和top值
    adjustElementStyle() {
      const primaryIndustry = document.getElementsByClassName('primary-industry')
      const secondIndustry = document.getElementsByClassName('second-industry')
      const tertiaryIndustry = document.getElementsByClassName('tertiary-industry')


      if ( !this.detailType ) {
        primaryIndustry[0]?.setAttribute('style', '')
        secondIndustry[0]?.setAttribute('style', '')
        document.getElementsByClassName('tree-org-node__children').forEach(item => {
          item.setAttribute('style', '')
        })

        return
      }

      let primary_height = 0
      let second_height = 0
      let tertiary_height = 0

      if ( primaryIndustry.length ) {
        const primaryItems = document.getElementsByClassName('group-item')
        primaryItems.forEach(item => {
          if ( item.offsetHeight > primary_height ) {
            primary_height = item.offsetHeight
          }
        })
        //primaryItems.forEan
        primaryIndustry[0].style.height = 60 + primary_height + 'px'
      }

      if ( secondIndustry.length ) {
        const secondItems = document.getElementsByClassName('second-in-item')
        //查找当前节点
        secondItems.forEach(item => {
          if ( item.offsetHeight > second_height ) {
            second_height = item.offsetHeight
          }
          const praentNode = item.parentNode.parentNode.parentNode.parentNode
          praentNode.style.paddingTop = primary_height + 'px'
          praentNode.style.setProperty("--BeforHeight", primary_height + 'px');
        })
        secondIndustry[0].style.top = (340 + primary_height) + 'px'
        secondIndustry[0].style.height = 60 + second_height + 'px'
      }
      if ( tertiaryIndustry.length ) {
        const tertiaryItems = document.getElementsByClassName('three-in-item')
        //查找当前节点
        tertiaryItems.forEach(item => {
          if ( item.offsetHeight > tertiary_height ) {
            tertiary_height = item.offsetHeight
          }
          const praentNode = item.parentNode.parentNode.parentNode.parentNode
          praentNode.style.paddingTop = second_height + 'px'
          praentNode.style.setProperty("--BeforHeightLast", second_height + 'px');
        })
        tertiaryIndustry[0].style.top = (440 + primary_height + second_height) + 'px'
        tertiaryIndustry[0].style.height = 60 + tertiary_height + 'px'
      }
    },
    /**
     * 查看公司详情
     * @param node
     */
    checkCompanyDetail(node) {
      this.$router.push('/industrial/company')
    },
    ondrag(x, y) {
    },
    /**
     * 打开新的页面
     * @param node
     */
    openTag(node) {
      console.log(node)
    }
  }
}

</script>

<style scoped lang="scss">
@import './chain-chart';

</style>

<style lang="scss">
@import './orgTree.scss';

.tip-content {
  width: 530px;
  padding: 10px;

  h1 {
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  p {
    font-size: 12px;
    color: #272727;
    line-height: 24px;
    margin-top: 10px;
  }

  .company-list {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    span {
      display: inline-block;
      width: 25%;
      font-size: 14px;
      line-height: 25px;
      cursor: pointer;

      &:hover {
        color: #1482f0;
      }
    }
  }
}
</style>
